<template>
	<view class="admin-auth-container">
		<view class="content">
			<view class="row sys-flex">
				<view class="left-box">
					<view class="img-box">
						<image src="../../static/images/auth1.png" mode="" class="img1"></image>
					</view>
					<text class="text">设备管理</text>
				</view>
				<evan-switch class="switch-block" v-model="checked1" active-color="#22C886" inactive-color="#CCCCCC" :size="38"></evan-switch>
			</view>
			<view class="row sys-flex">
				<view class="left-box">
					<view class="img-box">
						<image src="../../static/images/auth2.png" mode="" class="img2"></image>
					</view>
					<text class="text">控制开关</text>
				</view>
				<evan-switch class="switch-block" v-model="checked2" active-color="#22C886" inactive-color="#CCCCCC" :size="38"></evan-switch>
			</view>
			<view class="row sys-flex">
				<view class="left-box">
					<view class="img-box">
						<image src="../../static/images/auth3.png" mode="" class="img3"></image>
					</view>
					<text class="text">定位</text>
				</view>
				<evan-switch class="switch-block" v-model="checked3" active-color="#22C886" inactive-color="#CCCCCC" :size="38"></evan-switch>
			</view>
			<button class="botton-btn" @click="openAll">一键开启</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked1: false,
				checked2: false,
				checked3: false
			}
		},
		onLoad(option){
		},
		methods: {
			/**
			 * 一键开启
			 */
			openAll() {
				this.checked1 = true
				this.checked2 = true
				this.checked3 = true
			}
		}
	}
</script>

<style lang="scss">
	.admin-auth-container {
		padding: 24rpx;
		background: #f4f4f4;
		.content {
			background: #fff;
			height: calc(100vh - 48rpx);
			position: relative;
			.row {
				padding: 0 24rpx 0 0;
				height: 100rpx;
				background: #ffffff;
				.text {
					font-size: 28rpx;
					line-height: 30rpx;
					color: #333;
				}
				&.sys-flex {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid rgba(218, 218, 218, 0.8);
					.left-box {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.img-box {
							width: 88rpx;
							.img1 {
								display: block;
								width: 44rpx;
								height: 38rpx;
								margin: 0 auto;
							}
							.img2 {
								display: block;
								width: 35rpx;
								height: 41rpx;
								margin: 0 auto;
							}
							.img3 {
								display: block;
								width: 36rpx;
								height: 44rpx;
								margin: 0 auto;
							}
						}
					}
				}
			}
			.botton-btn {
				width: 682rpx;
				height: 100rpx;
				background: #21C885;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				position: absolute;
				left: 10rpx;
				bottom: 10rpx;
				line-height: 100rpx;
			}
		}
	}
</style>
